<template>
  <div>
    <pageMain padding="0px">
      <div class="overall-table-screen-options">
        <div class="overall-table-screen-options-left">
          <ul class="overall-table-screen-options-left-ul">
            <li class="overall-table-screen-options-left-ul-li"></li>
          </ul>
        </div>
      </div>

      <div class="overall-table-surround">
        <div class="overall-table-surround-table">
          <el-empty v-if="!pageData.list.length"></el-empty>

          <el-table
            v-else
            :size="tableSize"
            :border="tableBorder"
            :data="pageData.list"
            stripe
            highlight-current-row
          >
            <el-table-column prop="username" label="用户"></el-table-column>
            <el-table-column prop="real_type" label="认证类型" width="120">
              <template slot-scope="scope">
                <el-tag type="warning" size="mini" effect="plain">{{
                  $dictionary.extend("REAL_TYPE", scope.row.real_type)
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="real_create_date"
              label="提交时间"
            ></el-table-column>

            <el-table-column prop="comment" label="备注"></el-table-column>

            <el-table-column label="状态" fixed="right" align="center">
              <template slot-scope="scope">
                <el-tag type="warning" size="mini" effect="plain">{{
                  $dictionary.extend("REAL_STATE", scope.row.real_state)
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              fixed="right"
              label="操作"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                <div class="overall-table-options overall-flex">
                  <el-link type="warning" @click="getRealInfo(scope.row)"
                    >查看</el-link
                  >
                  <el-link
                    type="primary"
                    @click="clickEditUser(scope.row, scope.$index)"
                    >编辑</el-link
                  >
                  <el-link
                    type="danger"
                    @click="clickRemoveUser(scope.row, scope.$index)"
                    >删除</el-link
                  >
                </div>
              </template></el-table-column
            >
          </el-table>
        </div>
      </div>

      <div class="overall-table-pagination">
        <div class="overall-table-pagination-left">
          <el-select v-model="pageData.limit" placeholder="请选择" size="mini">
            <el-option
              v-for="item in pageLimit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="overall-table-pagination-right">
          <el-pagination background layout="prev, pager, next" :total="pageData.total">
          </el-pagination>
        </div>
      </div>
    </pageMain>
  </div>
</template>

<script>
import pageMain from "~/page-main/page-main.vue";
import tableAttrMixin from "@/mixins/table_attr";
import loadingMixin from "@/mixins/loading";
import ManageAPI from "@/api/manage";
export default {
  mixins: [tableAttrMixin, loadingMixin],
  components: { pageMain },
  data() {
    return {
      pageData: {
        page: 1,
        limit: 10,
        total: 100,
        list: [],
        where: {
          real_state: 0,
        },
      },
    };
  },

  created() {
    this.getData();
  },

  methods: {
    getRealInfo(row) {
      let user = row.id;
      ManageAPI.realInfo({ user })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getData() {
      let { where, page, limit } = this.pageData.where;
      ManageAPI.realList({ where, page, limit })
        .then((res) => {
          console.log(res);

          let { data } = res;

          let { list, total } = data;

          this.pageData.list = [];
          this.pageData.list = list;
          this.pageData.total = total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style></style>
